---
title: Color Swatch
description: Used to preview a color
links:
  source: components/color-swatch
  storybook: components-color-swatch--basic
  recipe: color-swatch
---

<ExampleTabs name="color-swatch-basic" />

## Usage

```tsx
import { ColorSwatch } from "@chakra-ui/react"
```

```tsx
<ColorSwatch />
```

## Examples

### Sizes

Use the `size` prop to change the size of the color swatch.

<ExampleTabs name="color-swatch-with-sizes" />

### Alpha

Here's an example of how to create a color swatch with an alpha channel.

<ExampleTabs name="color-swatch-with-alpha" />

### With Badge

Here's an example of how to compose the `ColorSwatch` with a `Badge`.

<ExampleTabs name="color-swatch-with-badge" />

### Mixed Colors

Use the `ColorSwatchMix` to create a color swatch that contains multiple colors,
but retains the size of a single color swatch.

<ExampleTabs name="color-swatch-mixed" />

### Palette

Here's an example of composing multiple swatches to create a palette.

<ExampleTabs name="color-swatch-palette" />
